<!--
 * @Author: your name
 * @Date: 2021-07-23 21:04:19
 * @LastEditTime: 2021-08-04 19:48:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hairdressing_web\src\pages\fenxiao\wodejilu.vue
-->
<template>
  <view v-if="data.length > 0">
    <view class="box" v-for="item in data" :key="item.id">
      <view @click="navTo(item.id, item.lowerOrderBrokerage, item.lowerOrderUserCount)">
        <view class="title">{{ item.name }}</view>
        <view class="c-flex price c-flex-alignCenter">
          <text>￥{{ item.price || item.originalPrice }}</text>
          <text v-for="gitem in item.effectList" :key="gitem.id">{{ gitem.name }}</text>
        </view>
        <view class="imgBox c-flex">
          <image :src="iitem" mode="" v-for="iitem in item.albumPics.split(',')" :key="iitem" />
        </view>
      </view>
      <view class="infor c-flex c-flex-between">
        <view class="c-flex textStyle">
          <view>
            <text>当前收入:</text>
            <text>{{ item.lowerOrderBrokerage }}</text>
          </view>
          <view>
            <text>成功分销人数:</text>
            <text>{{ item.lowerOrderUserCount }}人</text>
          </view>
        </view>
        <button :data-id="item.id" class="button" open-type="share">
          <image src="/static/icon/weixin1.png" mode="" />
          <text>分享</text>
        </button>
      </view>
    </view>
  </view>
  <u-empty text="分销记录为空" mode="list" v-else></u-empty>
</template>

<script>
  import fenxiao from '@/services/fenxiao'
  export default {
    data() {
      return {
        data: []
      }
    },
    onLoad() {
      fenxiao.liebiao().then(res => {
        console.log(res)
        this.data = res.list
      })
    },

    onShareAppMessage(res) {
      return {
        title: '我发现了一个好东西，快来看看吧~',
        path: '/pages/productDetails/index?id=' + res.target.dataset.id + '&userId=' + uni.getStorageSync('userId') // 分享的页面路径
      }
    },
    methods: {
      navTo(id, money, count) {
        wx.navigateTo({
          url: '/pages/fenxiao/detail?id=' + id + '&money=' + money + '&count=' + count
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  u-empty /deep/ {
    .u-empty {
      margin-top: 80rpx !important;
    }
  }
  .box {
    padding: 30rpx 38rpx;
    border-bottom: 6rpx solid #dfdfdf;
    .title {
      font-weight: bold;
      font-size: 36rpx;
      color: #2d2d2d;
      margin-bottom: 30rpx;
    }
    .price {
      margin-bottom: 40rpx;
      color: #ff6a21;
      text {
        &:first-of-type {
          font-size: 30rpx;
          font-weight: bold;
          margin-right: 15rpx;
        }
        &:not(:first-of-type) {
          font-size: 20rpx;
          padding: 8rpx;
          border: 1px solid #ff6a21;
          border-radius: 5rpx;
          margin-right: 15rpx;
        }
      }
    }
    .imgBox {
      margin-bottom: 40rpx;
      justify-content: flex-start;
      flex-flow: nowrap row;
      overflow: hidden;
      flex: 0;
      image {
        min-width: calc(33vw - 33rpx);
        width: calc(33vw - 33rpx);
        height: calc(33vw - 33rpx);
        &:first-of-type,
        &:nth-of-type(2) {
          margin-right: 16rpx;
        }
      }
    }
    .textStyle {
      > view {
        margin-right: 15rpx;
        font-weight: bold;
        text {
          &:first-of-type {
            font-size: 26rpx;
            color: #2c2c2c;
            margin-right: 10rpx;
          }
          &:last-of-type {
            font-size: 26rpx;
            color: #ff6a21;
          }
        }
      }
    }
    .button {
      margin: 0;
      background-color: #00b486;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      width: 120rpx;
      height: 56rpx;
      padding: 10rpx !important;
      font-size: 22rpx;
      border-radius: 30rpx;
      > image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
      }
    }
  }
</style>
